<template>
    <div class="storeInfo">
        <div class="head">               
            <el-button type="danger" @click="mark='add';add_edit_show=true" style="margin-left:30px;margin-top:15px">添加</el-button>           
        </div>
         
        <!-- tab部分 -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center" 
            tooltip-effect="dark">
                <el-table-column prop="id" label="ID" fixed></el-table-column>
                <el-table-column prop="answer_1" label="问题一答案"></el-table-column>
                <el-table-column prop="answer_2" label="问题二答案"></el-table-column>
                <el-table-column prop="item_name" label="二次推荐商品"></el-table-column>
                <el-table-column prop="combo_item_price" label="推荐商品价格"></el-table-column>

                <el-table-column prop="reason[0]" label="推荐原因"></el-table-column>
                <el-table-column prop="update_time" label="更新时间" width="200"> </el-table-column>
                <el-table-column prop="" label="操作" width="200">
                    <template slot-scope="scope">
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(item.url,scope.row)">
                            <i>{{item.name}}</i>
                            <i v-if="indexLimit != limitList.length-1">&nbsp;|&nbsp;</i>
                        </span>
                    </template>          
                        
                    
                </el-table-column>
                

            </el-table>
                        
        </div>
        <!-- 分页部分 后台没有做分页 -->
        <!-- <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination> -->
  

        <!-- 添加 -->
        <el-dialog title="添加" :visible.sync="add_edit_show">
            <el-form :model="editForm">
                <el-form-item label="问题选项"  :label-width="editW">
                    
                    <el-select clearable v-model="editForm.answer_1" placeholder="问题一">
                        <el-option v-for="item in answer" :key="item" :label="item"
                            :value="item"></el-option>
                    </el-select>
                    <el-select clearable v-model="editForm.answer_2" placeholder="问题二">
                        <el-option v-for="item in answer" :key="item" :label="item"
                            :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二次推荐商品" :label-width="editW">
                    <goodsListBox :input_url="input_url" :default_txt='default_txt' v-on:getsearchItemGood="getsearchItemGoodF"></goodsListBox>
                </el-form-item>
                <el-form-item label="商品原价格" :label-width="editW">
                    <el-input v-model="itemGoodsList.unit_price"></el-input>
                </el-form-item>

                

                <el-form-item label="商品价格" :label-width="editW">
                    <el-input v-model="editForm.combo_item_price"></el-input>
                </el-form-item>
                <el-form-item label="推荐套餐描述" :label-width="editW">
                    <el-input v-model="editForm.reason[0]"></el-input>
                </el-form-item>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="add_edit_show = false">取 消</el-button>
                <el-button type="primary" @click="addyes">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js';
import goodsListBox from '../../pop/goodslist.vue';
//import func from '../../../../../vue-temp/vue-editor-bridge';
//* ./vue-temp/vue-editor-bridge in-------vscode 自行在这里加入了一行代码致使报错
// var url= potUrl.rpriceList;
let goodurl = potUrl.itemSearch
export default {
    components:{
        goodsListBox:goodsListBox
    },
    data(){
        return {          
            tableData:[],
            total:50,
            size:20,
            input_url:goodurl,//搜素商品传递给子组件的搜索接口
            default_txt:'',//搜索商品子组件默认显示
            answer:['A','B','C'],//问题选项
            form:{
                size:20,
                page:1
            },//搜索内容的参数
            add_edit_show:false,//编辑、添加弹框的显示开关            
            pageNum:1,//page
            limitList:[],//权限的存储数组
            editW:'120px',
            editForm:{
                answer_1:'',//问题一
                answer_2:'',//问题二
                combo_item_price:'',//商品设置价格
                item_id:'1',//商品ID可以知道哪个商品和商品原价
                reason:[],//推荐原因，开始支持三个原因，此刻只需输入一个原因
                
            },//编辑弹框内需要的数据
            // timev:'',
            limitList_str:'',
            itemGoodsList:{unit_price:''},//搜索商品后返回的数据；obj;
            mark:'',//标记是添加还是编辑
        }
    },
    mounted(){
        var that = this;
        abc.get(that,potUrl.sreitensIndex,that.form,function(res){
            that.total = res.data.length
            that.tableData =  res.data;
        });//列表 
    },
    created(){
        var that = this;       
        that.limitList = [
            {name:'修改',url:'edit'},
            {name:'复制',url:'copy'},
            {name:'删除',url:'del'}

        ]     
    },
    methods:{   
        getsearchItemGoodF(data){
            this.itemGoodsList = data;
            this.editForm.item_id = data.item_id;
            console.log('goog',this.itemGoodsList)
            // this.itemGoodsList.push(data)
        }, 
        theClick(a,b){
            let that = this;
            if(a == 'edit' || a == 'copy'){  
                if(a == 'edit'){
                    that.mark = 'edit'
                }else{
                    that.mark = 'add'
                }         
                abc.get(that,potUrl.srecitemsdetail,{id:b.id},function(res){
                    that.default_txt = res.data.item_name;//赋值搜索商品框
                    that.editForm = res.data;//赋值给编辑的数据；
                    that.itemGoodsList.unit_price = res.data.unit_price;//赋值给搜索出来后的商品的原价格
                    that.add_edit_show =true;                    
                })
            }else if(a == 'del'){
                abc.twoTips(that,potUrl.srecitemsdel,'是否要删除此条数据？',{id:b.id},function() {
                    that.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                    abc.get(that,potUrl.sreitensIndex,that.form,function(res){
                        that.total = res.data.length
                        that.tableData =  res.data;
                    });//列表 
                })
            }
            
        },
        // changePage(val){
        //     //翻页
        //     var that = this;
        //     that.pageNum = val;
        //     this.form.page = val;
        //    abc.getList(that,potUrl.sreitensIndex,that.form);
        // },
        addyes(a){
            //添加时的确定按钮操作；
            let that = this;
            console.log(this.mark)
            let yesurl = ''
            if(that.mark == 'add'){
                yesurl = potUrl.srecitemsadd
            }else{
                yesurl = potUrl.srecitemsedit
            }
            abc.post(that,yesurl,that.editForm,function(res){
                that.add_edit_show = false;
                that.editForm={
                    answer_1:'',//问题一
                    answer_2:'',//问题二
                    combo_item_price:'',//商品设置价格
                    item_id:'1',//商品ID可以知道哪个商品和商品原价
                    reason:[],//推荐原因，开始支持三个原因，此刻只需输入一个原因
                    
                }
                abc.get(that,potUrl.sreitensIndex,that.form,function(res){
                    that.total = res.data.length
                    that.tableData =  res.data;
                });//列表 
            })
            
        }
    }
}

</script>